<template>
  <header>
    <div class="left">
        <img src="../../assets/img/img24.png" alt="">
    </div>
    <div class="inputsbox">
           <div class="city">
               <span @click="citys">江西省</span>
               <span :class="judge==0?'el-icon-caret-bottom':'el-icon-caret-top'"></span>
           </div>
            <input type="text" placeholder="搜索关键词...">
            <span class="sousuo">搜索</span>
    </div>
    <div class="myself">
        <img @click="fn" src="../../assets/img/img18.png" alt="">
    </div>
    <DraWerVue v-if="login"></DraWerVue>
    <transition name="judge">
        <CityAllVue v-if="judge" ref="citys"></CityAllVue>
    </transition>
  </header>
</template>

<script>
import DraWerVue from '../../components/xiaozujian/DraWer.vue'
import CityAllVue from '@/components/xiaozujian/CityAll.vue'
import { mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
        }
    },
    methods:{
        ...mapMutations(['fn','fn1']),
        citys(){
            this.fn1()            
        }
    },
    components:{
        DraWerVue,
        CityAllVue
    },
    computed:{
        ...mapState(["login",'judge'])
    }

}
</script>

<style scoped>
.judge-enter{
    height: 0;
}
.judge-enter-to{
    height: 100%;
     transition: all 0.2s;
}
.judge-leave{
    height: 100%;
}
.judge-leave-to{
height: 0;
transition: all 0.3s;
}

header{
    height:1rem;
    width: 100%;
    background-color: #ba050e;
    display: flex;
    justify-content: space-around;
    position: fixed;
    z-index: 30;
    top: 0;
    align-items: center;
}
.inputsbox{
   flex: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
   font-size: .24rem;
    height :.6rem;
    background-color: #fff;
    border-radius: .3rem;
    padding: .1rem .1rem .1rem .05rem;
}
.city{
    height: 100%;
    display: flex;
    font-size: .24rem;
    justify-content: center;
    align-items: center;
}
.inputsbox>input{
        width:50%;
        height: 100%;
        padding-left: .1rem;
        font-size: .24rem;
        height:100%;
        outline: 0;
        border: 0
    }

.left{
    flex: 1;
    height :100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.left>img{
        width :100%;
        height: 100%;
    }
.myself{
    flex: 1;
    height :100%;
    margin-left: .1rem;
   display: flex;
   justify-content: center;
   align-items: center;
    
    }
    .myself>img{
      width :.65rem;
        height:.65rem;
    }
</style>